<template>
  <div class="menu" >
	  <!-- <el-tabs style="padding:10px;height: 110px;" class="tabs" v-model="activeTabName">
	  		<el-tab-pane v-for="item in tableData">
                <template #label ><el-button :icon="riyong"  @click="getCategoryId(item)">{{item.name}}</el-button></template>			
                <div class="tab-btn">
                <el-tabs v-model="activeTabName2">
                    <el-tab-pane ></el-tab-pane>
                    <el-tab-pane v-for="items in item.children" ><template #label ><el-button @click="getCategoryId(items)" size="large"><span >{{items.name}}</span></el-button></template></el-tab-pane>
                </el-tabs>
            </div>
	  		</el-tab-pane>
	  </el-tabs> -->
		  <!-- <el-tabs style="padding-top:10px;margin-left: 20px;"  class="tabs" v-model="activeTabName00">
		  		
				<el-tab-pane v-for="item in suitable">
				    <template #label ><el-button @click="setSuitableId(item.id)">{{item.name}}</el-button></template>			
				</el-tab-pane>
		  </el-tabs> -->
	
	  <el-tabs style="padding:0px;margin-left: 20px;"  class="tabs" v-model="activeTabName01">
	  		<el-tab-pane v-for="item in brand">
	            <template #label ><el-button @click="setBrandId(item.id)">{{item.name}}</el-button></template>			
	  		</el-tab-pane>
	  </el-tabs>
	  <el-tabs style="padding:0px;margin-left: 20px;"  class="tabs" v-model="activeTabName02">
	  		<el-tab-pane v-for="item in category">
	            <template #label ><el-button @click="setCategoryId(item.id)">{{item.name}}</el-button></template>			
	  		</el-tab-pane>
	  </el-tabs>
	  <!-- <el-tabs style="padding:0px;margin-left: 20px;" class="tabs" v-model="activeTabName03">
	  		<el-tab-pane v-for="item in size">
	            <template #label ><el-button @click="setSizeId(item.id)">{{item.size}}</el-button></template>			
	  		</el-tab-pane>
	  </el-tabs>
	  <el-tabs style="padding:0px;margin-left: 20px;"  class="tabs" v-model="activeTabName04">
	  		<el-tab-pane v-for="item in colour">
	            <template #label ><el-button @click="setColourId(item.id)">{{item.name}}</el-button></template>			
	  		</el-tab-pane>
	  </el-tabs> -->
  </div>
</template>

<script setup>

import riyong from '@/components/img/goods/riyong'
import { get } from '@/plugins/axios'
import { ref,reactive } from 'vue'
import router from '@/router';
import { useRoute } from 'vue-router';
// const activeTabName= ''
// const activeTabName2= ''
// const tableData = ref()
// const params = reactive({
// })

const activeTabName00= ''
const activeTabName01= ''
const activeTabName02= ''
const activeTabName03= ''
const activeTabName04= ''
const nowData = reactive({
	brandid:-1,
	categoryid:-1,
	// sizeid:-1,
	// colourid:-1
})
// const suitable = ref([
// 	{id: 1, name: "男鞋"},
// 	{id: 0, name: "女鞋"},
// 	{id: 2, name: "童鞋"}
// ]);
const category = ref([
  // 日常休闲类
  { id: 1, name: "板鞋", desc: "平底硫化底设计，搭配牛仔裤/休闲裤，适合日常出街" },
  { id: 2, name: "帆布鞋", desc: "帆布面料轻便透气，经典款（如匡威 Chuck 70），学生党/通勤首选" },
  { id: 3, name: "乐福鞋", desc: "无鞋带套脚设计，皮质为主，兼具休闲与轻商务属性" },
  { id: 4, name: "老爹鞋", desc: "厚底复古造型，显高显瘦，适合搭配运动风/街头风服饰" },
  
  // 运动功能类
  { id: 5, name: "跑鞋", desc: "带缓震/支撑科技（如气垫、Boost），适合长跑/日常慢跑" },
  { id: 6, name: "篮球鞋", desc: "高帮护踝+耐磨鞋底，加强抗扭设计，专为篮球运动打造" },
  { id: 7, name: "足球鞋", desc: "鞋钉设计（碎钉/长钉），增强草地抓地力，适配足球场地" },
  { id: 8, name: "羽毛球鞋", desc: "轻量化+防滑鞋底，灵活弯折，适合快速启停的球类运动" },
  
  // 商务正装类
  { id: 9, name: "牛津鞋", desc: "封闭式鞋带设计，皮质细腻，搭配西装，商务会议/正式场合必备" },
  { id: 10, name: "德比鞋", desc: "开放式鞋带设计，比牛津鞋更休闲，可搭配西装或休闲西裤" },
  { id: 11, name: "商务皮鞋", desc: "圆头/方头款式，软底舒适，适合长时间办公室通勤" },
  
  // 户外功能类
  { id: 12, name: "登山靴", desc: "高帮防崴脚+防水面料（如GORE-TEX），适配山地/徒步场景" },
  { id: 13, name: "工装靴", desc: "厚底耐磨+金属鞋眼，复古硬朗，适合户外工作/秋冬搭配" },
  { id: 14, name: "雪地靴", desc: "加绒保暖+防水鞋面，短筒/中筒款式，冬季雨雪天气专用" },
  
  // 季节/特殊场景类
  { id: 15, name: "凉鞋", desc: "露趾/露跟设计，透气轻便，夏季日常/海边度假适用" },
  { id: 16, name: "棉鞋", desc: "内里加棉+防滑底，低帮款式，冬季室内/短途出行保暖用" },
  { id: 17, name: "马丁靴", desc: "8孔/10孔高帮设计，皮质坚韧，潮流百搭，适合秋冬季节" }
]);
const colour = ref([
  { id: 1, name: "经典黑" },        // 百搭基础色，不挑场景
  { id: 2, name: "纯净白" },        // 清爽干净，适合春夏
  { id: 3, name: "深灰" },          // 低调高级，耐脏易打理
  { id: 4, name: "藏青" },          // 商务休闲皆可，显气质
  { id: 5, name: "酒红" },          // 复古显白，适合秋冬
  { id: 6, name: "米白" },          // 比纯白柔和，更显质感
  { id: 7, name: "奶茶棕" },        // 近年流行色，温柔百搭
  { id: 8, name: "克莱因蓝" },      // 高饱和流行色，吸睛度高
  { id: 9, name: "黑白渐变" },      // 特殊工艺，比纯色更有设计感
  { id: 10, name: "奶白拼粉" },     // 少女感配色，适合休闲鞋
  { id: 11, name: "墨绿" },          // 复古高级，适合工装靴/皮鞋
  { id: 12, name: "银灰反光" },     // 带反光材质，夜间安全且潮流
]);
const size = ref([
  // 儿童鞋尺码（25-35码，对应脚长14-22.5cm）
  { id: 1, size: "25码" },
  { id: 2, size: "27码" },
  { id: 3, size: "29码" },
  { id: 4, size: "31码" },
  { id: 5, size: "33码" },
  { id: 6, size: "35码" },
  
  // 成人女鞋尺码（35-40码，对应脚长22.5-25cm）
  { id: 7, size: "36码" },
  { id: 8, size: "37码" },
  { id: 9, size: "38码" },
  { id: 10, size: "39码" },
  { id: 11, size: "40码" },
  
  // 成人男鞋尺码（39-46码，对应脚长24.5-28cm）
  { id: 12, size: "41码" },
  { id: 13, size: "42码" },
  { id: 14, size: "43码" },
  { id: 15, size: "44码" },
  { id: 16, size: "45码" },
  { id: 17, size: "46码" }
]);
const brand = ref([
  { id: 1, name: "耐克" },    // 运动品牌，全球知名
  { id: 2, name: "阿迪达斯" },// 运动品牌，经典三道杠设计
  { id: 3, name: "匡威" },  // 休闲帆布鞋，年轻人主流选择
  { id: 4, name: "万斯" },     // 街头潮流品牌，滑板鞋代表
  { id: 5, name: "新百伦" },// 复古跑鞋，主打舒适缓震
  { id: 6, name: "彪马" },     // 运动+时尚结合，设计感强
  { id: 7, name: "百丽" },    // 女鞋为主，兼顾通勤与休闲
  { id: 8, name: "其乐" },   // 英伦休闲鞋，主打舒适真皮
  { id: 9, name: " Timberland" },// 户外工装靴，防水耐磨
  { id: 10, name: "UGG" }             // 冬季雪地靴，保暖性强
]);


// getTableData2()
// function getTableData2() {
// 	get("/category/list", params, content => {
// 			tableData.value = content 
// 				console.dir(content)
// 		})
// 	console.dir(tableData)
// // router.push({
// // 		path:'/goods',
// // 		query:{categoryId:-1}
// // 	})
// }

getTableData()
function getTableData() {
	get("/user/shoes/getCategory", nowData, content => {
			category.value = content 
				console.dir(content)
		})
	console.dir(category)
	get("/user/shoes/getBrands", nowData, content => {
			brand.value = content 
				console.dir(content)
		})
	console.dir(brand)
	// get("/user/shoes/getSize", nowData, content => {
	// 		size.value = content 
	// 			console.dir(content)
	// 	})
	// console.dir(size)
	// get("/user/shoes/getColours", nowData, content => {
	// 		colour.value = content 
	// 			console.dir(content)
	// 	})
	// console.dir(colour)
	console.dir("查询成功!")
// router.push({
// 		path:'/goods',
// 		query:{categoryId:-1}
// 	})
}


// function getCategoryId(items){
// 	// params.categoryId=items.id
// 	// console.dir(params.categoryId)
// 	router.push({
// 		path:'/goods',
// 		query:{categoryId:items.id}
// 	})
// }

function setBrandId(id){
	nowData.brandid=id
	console.dir(nowData.brandid)
	router.push({
		path:'/goods',
		query:{
			brandid:nowData.brandid,
			categoryid:nowData.categoryid,
			// sizeid:nowData.sizeid,
			// colourid:nowData.colourid,
			}
	})
}
function setCategoryId(id){
	nowData.categoryid=id
	console.dir(nowData.categoryid)
	router.push({
		path:'/goods',
		query:{
			brandid:nowData.brandid,
			categoryid:nowData.categoryid,
			// sizeid:nowData.sizeid,
			// colourid:nowData.colourid,
			}
	})
}
// function setSizeId(id){
// 	nowData.sizeid=id
// 	console.dir(nowData.sizeid)
// 	router.push({
// 		path:'/goods',
// 		query:{
// 			brandid:nowData.brandid,
// 			categoryid:nowData.categoryid,
// 			sizeid:nowData.sizeid,
// 			colourid:nowData.colourid}
// 	})
// }
// function setColourId(id){
// 	nowData.colourid=id
// 	console.dir(nowData.colourid)
// 	router.push({
// 		path:'/goods',
// 		query:{
// 			brandid:nowData.brandid,
// 			categoryid:nowData.categoryid,
// 			sizeid:nowData.sizeid,
// 			colourid:nowData.colourid}
// 	})
// }

</script>

<style scoped lang="scss">
.menu{
	background-color: #fff5e9;
	border-radius: 8px;
	margin-bottom: 10px;
	.el-tabs__item{
		padding: 0px!important;
	}
	.el-tabs__content {
	    display: none !important; /* 完全隐藏容器，不占空间 */
	    height: 0 !important;     /* 双重保险，确保高度为 0 */
	    overflow: hidden !important;
	  }
    .el-button{
        height: 90%;
        background-color: #fff5e9;
        border: 0;
      //color: #5de876;
		color: currentColor;
    }
	.tabs{
		// height: 70px;
		margin: 0px;

		& .el-tabs__header {
		      padding: 0; /* 清除 Element Plus 默认的上下 padding */
		      margin: 0;  /* 清除默认margin */
		    }
	}
  :hover{
    color: #f59115;
  }
}
/* 去掉长分割线 */
:deep(.el-tabs__nav-wrap::after) {
  position: static !important;
}

/* 去掉下划线 */
:deep(.el-tabs__active-bar) {
  background-color: transparent !important;
}
:deep(.el-tabs__item) {
  padding: 0px;
}

</style>